<div id="content">
	<ul class='looks_small'></ul>
</div>

<div id="sidebar">

	<div class="choice-form">
		<fieldset>
			<label>Готовые</label>
			<div class='checkboxArea' id='only_with_foto'></div>
		</fieldset>
	</div>
					
	<ul class="menu">
		{if $isStylist}
			<li id='clients'>
			</li>
		{/if}
		
		<li id='look_sets'>
		</li>
		<li id='look_types'>
		</li>
	</ul>
	{if !$isStylist}
	<div class="img-box">
		<div class="img-box-holder">
			<div class="img-box-frame">
				<a href="#" style='width:143px; height:167px;' onclick='openStylist();return false;'><img src='{thumbnail width="143" height="167"}{$stylistImage}{/thumbnail}' /></a>
			</div>
		</div>
	</div>
	{/if}
	<div class="block">
		<div class="heading">
			<h2>СООБЩЕНИЯ</h2>
		</div>
		<div class="boxes" id='messages'>
		</div>
		<form class="feedback-form" id='send_message'>
			<fieldset>
				<div class="textarea-holder">
					<textarea cols="26" rows="2"></textarea>
				</div>
				<input type="submit" class="submit" value="ОТПРАВИТЬ" />
			</fieldset>
		</form>
	</div>
	
	{include 'calendar.tpl'}
</div>
			
{literal}
<script id='look_tpl' type="text/x-jsmart-tmpl">
	<li>
		<a href='#' class="look" id={$look[0]}>
			<div>
				<img class='look_background' orig='{$look[4]|default:''}'>
			</div>
		</a>
		<a href='#' class="title">{$look[2]}</a>
	</li>
</script>

<script id='look_item_tpl' type="text/x-jsmart-tmpl">
	<div style="width: {$width}px; height:{$height}px; left:{$left}px; top:{$top}px; z-index:{$zindex};">
		<img src='{$image}'  style="width:{$width}px; height:{$height}px;">
	</div>
</script>

<script id='message_tpl' type="text/x-jsmart-tmpl">
	<div class="box {if !$msg[7]}new{/if}">
		<div class="entry-title">
			<em class="date">{$msg[4]}</em>
			<span href="#">{$msg[2]}</span>
		</div>
		<div class="entry-content">
			{$msg[6]}
		</div>
	</div>
</script>

<script id='stylist_tpl' type="text/x-jsmart-tmpl">
	
	<div id='stylist_info'>
		<img src='{$image}' />
		<span class='name'>{$name}</span>
		<span>Email: <span>{$email|default:''}</span></span>
		<span>Телефон: <span>{$phone|default:''}</span></span>
		<span>Skype: <span>{$skype|default:''}</span></span>
	</div>
</script>
{/literal}


<style>
	.looks_small li {
		display: block;
		float: left;
		position: relative;
		margin-right: 50px;
		margin-bottom: 60px;
	}
	
	.looks_small li .title {
		text-decoration: none;
		color: #666;
		display: block;
		font: bold 12px/16px Arial, Verdana, sans-serif;
		position: absolute;
		left: 0px;
		bottom: 0px;
		margin-bottom: -25px;
	}
	
	.look {
		position: relative;
		width:133px;
		height:250px;
		display:block;
	}
	
	.look div {
		position: absolute;
	}
	
	.look div:first-child {
		width:135px;
		height:250px;
		text-align:center;
	}
	
	#stylist_info {
		height: 300px;
		text-align: left;
		padding: 20px;
		color:#323232;
		font: 18px/22px "Times New Roman", Times, serif;
	}
	
	#stylist_info img {
		float:left;
		padding-right:20px;
	}
	
	#stylist_info > span {
		display: block;
		font-size: 15px;
		padding: 5px;
	}
	
	#stylist_info > span > span {
		font-weight: bold;
		padding-bottom:10px;
		font-size: 18px;
	}
	
	#stylist_info > .name {
		text-transform:uppercase;
		font-size: 22px;
		font-weight: bold;
		padding-bottom:20px;
	}
	
	#messages {
		max-height: 150px;
		overflow-y: auto;
	}
	
	#messages .new .entry-content {
		font-weight: bold;
	}
</style>


<script>
	var looksFilters = {};
	
	function loadLooks() {
		$('#content .looks_small').empty();
		
		looksFilters.client_id = clientId;
		
		call('admin.getList', { 'id': 'looks', 'filter': looksFilters } ).done( function(looks) {
			for (var i=0; i<looks.length; ++i) {
				$('#content .looks_small').append($('#look_tpl').html().fetch({ 'look':looks[i] }));
				$('#content .looks_small .look_background').each(function(){
					var img = $(this);
					if (img.attr('orig')) {
						call('image.getThumbnail', { 'path':img.attr('orig'), 'width':135, 'height':250 } ).done(function(thumbnail){
							img.attr('src',thumbnail);
						});
					}
				});
				loadLook(looks[i][0]);
			}
			$('.looks_small li a').click(function(e) {
				e.preventDefault();
				call('session.set',{ 'name':'lookID', 'value':$(e.target).closest('li').find('a:first-child').attr('id') } ).done( function() {
					location.href = '/closet';
				} );
			} );
		} );
		
		call('session.set',{ 'name':'looks_filter', 'value':looksFilters });
	}
	
	function loadLook(id) {
		call('admin.getList', { 'id':'look_items', params: { 'lookId':id } } ).done( function(items) {
			var look = $('#'+id);
			var onThumbLoad = function(item,i) {
				return function(thumbnail) {
					look.append( $('#look_item_tpl').html().fetch( { 
						'item':item,
						'image': thumbnail,
						'width': item[2]/2,
						'height': item[3]/2,
						'left': item[4]/2,
						'top': item[5]/2,
						'zindex': i
					} ) );
				}
			};
			for (var i=0; i<items.length; ++i) {
				call('image.getThumbnail', { 'path':items[i][6], 'width':150, 'height':150 } ).done(onThumbLoad(items[i],i));
			}
		} );
	}
	

	function loadMessages() {
		$('#messages').empty();
		call('admin.getList', { 'id': 'messages_conversation', 'params':{ 'userId':(isStylist?clientId:stylistId) } } ).done( function(messages) {
			var t = new jSmart($('#message_tpl').html());
			for (var i=0; i<messages.length; ++i) {
				$('#messages').append(t.fetch( { 'msg':messages[i] } ));
				call('admin.doAction',{ 'id':'message_read', 'params':{ 'id':messages[i][0] } });
			}
			$("#messages").scrollTop($("#messages")[0].scrollHeight);
		} );
	}
	
	function sendMessage(text) {
		call('message.send', { 'to':(isStylist ? clientId : stylistId), 'subject':'', 'text':text } ).done( function() {
			loadMessages();
		} );
	}
	
	function openStylist() {
		call('admin.findByKey',{ 'vid':'stylist', 'k':stylistId }).done(function(stylist){
			popup('Стилист', $('#stylist_tpl').html().fetch(stylist));
		});
	}
	
	$( function() {
		$('#send_message').on( {
			'submit': function(e) {
				e.preventDefault();
				var txt = $('#send_message textarea').val();
				$('#send_message textarea').val('');
				sendMessage( txt );
			}
		} );
		
		{if $isStylist}
			$('#clients').opener({
				'title': 'КЛИЕНТЫ',
				'list': clients,
				'onClick': function(v) { changeClient(v); loadMessages(); loadLooks(); },
				'value': clientId
			});
		{/if}
		
		loadMessages();
		
		call('session.get',{ 'name':'looks_filter' }).done(function(filter){
			if (filter) {
				looksFilters = filter;
			}

			call('admin.getList', { 'id':'look_types', 'params':{ 'clientId':clientId } } ).done( function(types) {
				$('#look_types').opener({
					'title': 'КУДА ИДЕМ',
					'list': types,
					'onClick': function(v) { looksFilters.type_id=v; loadLooks(); },
					'onSecondClick': function(v) { delete looksFilters.type_id; loadLooks(); },
					'value': looksFilters.type_id
				});
			} );
			
			call('admin.getList', { 'id':'look_sets', 'params':{ 'clientId':clientId } } ).done( function(sets) {
				$('#look_sets').opener({
					'title': 'КОМПЛЕКТ',
					'list': sets,
					'onClick': function(v) { looksFilters.set_id=v; loadLooks(); },
					'onSecondClick': function(v) { delete looksFilters.set_id; loadLooks(); },
					'value': looksFilters.set_id
				});
			} );
			
			$('#only_with_foto').click(function(e){
				if ($(e.target).hasClass('checked')) {
					looksFilters.has_foto = 1;
				} else {
					delete looksFilters.has_foto;
				}
				loadLooks();
			}).addClass(('has_foto' in looksFilters)?'checked':'');
		
			loadLooks();
		});
	} );
</script>

